<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue-条件渲染</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 基于v-if 判断实现条件渲染 -->
    <div id="app-1">
        <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>
    </div>

    <!-- 基于template元素进行渲染 -->
    <div id="app-2">
        <template v-if="ok">
            <h1>{{ title }}</h1>
            <p>{{ contents }}</p>
        </template>
    </div>


    <!-- 基于v-show 进行渲染。这个和v-if 的区别在于，v-show的dom对象时一直存在的，只是通过css控制显示或者不显示 -->
    <h1 v-show="ok">Hello !</h1>

    <!--
        当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
    -->

</body>
<script>
    var app1 = new Vue({
        el: '#app-1',
        data: {

        }
    })

</script>

</html>